<template>
  <div>
<!--    功能按钮-->
    <!--    搜索表单-->
    <div style="margin:10px 5px">
      <!--      v-mode v-model绑定变量,使其可以进行搜索;@click使其可以搜索-->
      <el-input style="width:240px" placeholder="请输入展会名" v-model="params.name"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load"><el-icon style="vertical-align:middle;margin-right: 5px"><Search /></el-icon> 搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset"><el-icon style="vertical-align:middle;margin-right: 5px"><Refresh /></el-icon> 重置</el-button>
      <el-button style="margin-left: 5px" type="success" @click="$router.push('/addExhibition')"><el-icon style="vertical-align:middle;margin-right: 5px"><Plus /></el-icon> 新增展会</el-button>
    </div>

<!--    表格区域-->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID"  style="width:40px"/>
      <el-table-column prop="name" label="名称"  :show-overflow-tooltip="true"/>
<!--      <el-table-column prop="password" label="密码" width="80"/>-->
      <el-table-column prop="category" label="类别" :show-overflow-tooltip="true"/>
      <el-table-column prop="location" label="位置" :show-overflow-tooltip="true"/>
      <el-table-column prop="cover" label="封面图" style="width: 100px">
        <template v-slot="scope">
          <el-image :src="scope.row.cover" :preview-src-list="[]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="活动开始时间" />
      <el-table-column prop="endTime" label="活动结束时间" />
      <el-table-column prop="status" label="展览状态" >
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status === '在展'">{{scope.row.status}}</el-tag>
          <el-tag type="primary" v-if="scope.row.status === '未开展'">{{scope.row.status}}</el-tag>
          <el-tag type="warning" v-if="scope.row.status === '即将结束'">{{scope.row.status}}</el-tag>
          <el-tag type="danger" v-if="scope.row.status === '已结束'">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="participantNums" label="参会人数" />
      <el-table-column prop="detail" label="详情介绍" :show-overflow-tooltip="true"/>
      <el-table-column prop="hits" label="点击次数" />
<!--      <el-table-column prop="createTime" label="创建时间" />-->
<!--      <el-table-column prop="updateTime" label="更新时间"/>-->

      <el-table-column fixed="right" label="操作" width="180px">
        <template #default="scope">
          <!--          scope.row就是当前行数据;scope.row.id获取当前行id @click方法实现点击后跳转,并显示数据信息-->
          <el-button type="primary" @click="$router.push('/editExhibition?id=' + scope.row.id)">
            编辑
          </el-button>

          <el-popconfirm title="确认删除吗?" confirm-button-text='是'
                         cancel-button-text='否' @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <!--    分页功能,来自element ui-->
    <!--    current-page和page-size绑定分页组件,提供当前页码以及当前每一个个数跟数据绑定-->
    <div style="margin-top: 20px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import request from "@/utils/request"
import { Search,Refresh,Plus} from '@element-plus/icons-vue'
export default {
  name: "ExhibitionList",
  components:{
    Search,
    Refresh,
    Plus
  },
  data(){
    return{
      tableData:[],
      total: 0,
      //  params绑定值用于向localhost:9090/exhibition/page发送请求,进行模糊查询
      params: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      dialogFormVisible: false,
      form: {},
      // value1: '',
    }
  },
  created(){
    //  页面加载后调用method方法
    this.load()
  },
  methods:{
    load(){
      request.get('/exhibition/page',{
        params:this.params
      }).then(res => {

        if(res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
          // console.log(this.params)
        }
      })
    },
    reset(){
      this.params={
        pageNum: 1,
        pageSize: 10,
        title: ''
      }
      this.load()
    },
    add(){

    },
    handleCurrentChange(pageNum){
      //  点击分页按钮实现分页
      this.params.pageNum=pageNum
      this.load()
    },
    del(id){
      request.delete("/exhibition/" +id).then(res => {
        if(res.code === '200'){
          this.$success({type:"success",message:"删除成功" })
        }else{
          this.$message({type:"error",message:res.msg})
          console.log(id)
        }
        this.load()
      })
    },
    handleDelete(id){
      console.log(id)
      request.delete("/exhibition/delete/"+id).then(res => {
        if(res.code == '200'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load() //重新加载表格的数据

      })
    },
  }
}
</script>

<style scoped>

</style>